<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>光影文本阴影动画</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="text">Shadow</div>
    <div id="light"></div>
    <script>
        let text = document.getElementById('text');
        let light = document.getElementById('light');
        document.addEventListener('mousemove', function(event) {
            let mouseX = event.clientX;
            let mouseY = event.clientY;
            light.style.left = mouseX + 'px';
            light.style.top = mouseY + 'px';

            let distanceX = mouseX - text.offsetLeft - text.offsetWidth / 2;
            let distanceY = mouseY - text.offsetTop - text.offsetHeight / 2;

            let newShadow = '';
            for (let i = 0; i < 200; i++) {
                let shadowX = -distanceX * (i / 200);
                let shadowY = -distanceY * (i / 200);
                let opacity = 1 - (i / 100);
                newShadow += `${newShadow ? ',' : ''}${shadowX}px ${shadowY}px 0 rgba(33,33,33,${opacity})`;
            }
            text.style.textShadow = newShadow;
        })
    </script>
</body>
</html>